<template>
  <s-layout title="鲸囍云店">
    <view class="rank-container">
      <su-sticky bgColor="#fff">
        <su-tabs :list="tabMaps" lineColor="#3662EC" :activeStyle="{ color: '#3662EC' }" :scrollable="false"
          :current="state.currentTab" @change="onTabsChange">
        </su-tabs>
      </su-sticky>
      <!-- 数据详情 -->
      <view class="data-grid">
        <view class="title">数据详情</view>
        <view class="datas">
          <view 
            class="data-item" 
            v-for="item in state.dataList" 
            :key="item.id"
            :style="{ backgroundImage: `url(${sheep.$url.cdn(item.img)})` }"
          >
            <view class="data-item-title">{{ item.title }}</view>
            <view class="data-item-num">{{ item.num }}</view>
          </view>
        </view>
      </view>

      <!-- 排行榜 -->
      <view class="rank-top" :style="{height: state.rankList.length == 0 ? '340rpx' : null }">
        <view class="rank-top-item" v-for="item in state.rankTOPList" :key="item.rank">
          <image class="avatar" :src="sheep.$url.cdn(item.avatar) || 'http://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/static/img/default_avatar.png'" mode="widthFix"></image>
          <text class="name">{{ item.nickname || '--' }} </text>
          <!-- <view class="rank1">{{ item.rank }}</view> -->
          <text class="sales">销量:{{item.order_num}}</text>
        </view>
      </view>

      <view class="rank">
        <!-- 表头 -->
        <view class="list-header">
          <text class="left"></text>
          <text class="center">用户</text>
          <text class="right">销量</text>
        </view>

        <!-- 列表内容 -->
        <view v-if="state.rankList.length > 0" class="list-item" v-for="item in state.rankList" :key="item.rank">
          <!-- 排名 -->
          <view class="rank-num">{{item.rank}}</view>
          
          <!-- 用户信息 -->
          <view class="user-info">
            <image class="avatar" :src="sheep.$url.cdn(item.avatar)" mode="aspectFill"></image>
            <text class="name ss-line-1">{{item.nickname}}</text>
          </view>
          
          <!-- 销量 -->
          <view class="sales">{{item.order_num}}</view>
        </view>
        <!-- 暂无数据 -->
        <s-empty v-else paddingTop="20" 
          icon="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/soldout-empty.png" text="暂无数据">
        </s-empty>
      </view>

      <!-- 底部tab -->
      <view class="footer-tabs">
        <view 
          class="footer-tab-item" 
          :class="{ active: state.currentFooterTab === index }" 
          v-for="(item, index) in footerTbs" 
          @click="onFooterTabClick(index)"
          :key="item.value">
          <image class="icon" :src="sheep.$url.cdn(item.icon)" mode="widthFix"></image>
          <view class="title">{{ item.name }}</view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import { isEmpty } from 'lodash';
const tabMaps = [
  {
    name: '昨日',
    value: '1',
  },
  {
    name: '本周',
    value: '2',
  },
  {
    name: '本月',
    value: '3',
  },
  {
    name: '全部',
    value: '4',
  },
];

const footerTbs = [
  {
    name: '云店数据',
    value: 'all',
    icon: '/storage/default/20250425/00d96c1d1571396b8746254ecf9949b6.png',
  },
  {
    name: '我的团队',
    value: 'yes',
    icon: '/storage/default/20250425/f08f4d43792a8116ac46445c0ccacd85.png',
  },
  {
    name: '我的云店',
    value: 'back',
    icon: '/storage/default/20250425/66d0e0463301707f0701fe2ebe470c5a.png',
  }
];

const state = reactive({
  currentTab: 0, 
  type: '1', // 1=昨天 2=本周 3=本月 4=全部
  currentFooterTab: 0,
  dataList: [
    {
      title: '总销售额',
      num: '0',
      id: 1,
      img: '/storage/default/20250424/6f32727caf8ee28c45b2649249d65e4a.png',
      key: 'all_amount',
    },
    {
      title: '有效单数',
      num: '0',
      id: 2,
      img: '/storage/default/20250424/a1073f04416a72d2fd8b2dae0343071c.png',
      key: 'order_num',
    },
    {
      title: '可结算金额',
      num: '0',
      id: 3,
      img: '/storage/default/20250424/d1d55333cc18b19772820c8db0de5242.png',
      key: 'settable_amount',
    },
    {
      title: '待结算金额',
      num: '0',
      id: 4,
      img: '/storage/default/20250424/f8a074fda307d1f92c6f008fe97d52ba.png',
      key: 'pending_settlement_amount',
    },
  ],
  rankTOPList: [
    // {
    //   rank: 'TOP 2',
    //   avatar: '/storage/default/20250424/1976367572fbb88a678f18c19c2f2a63.jpg',
    //   nickname: '张三',
    //   order_num: '1000',
    // },
    // {
    //   rank: 'TOP 1',
    //   avatar: '/storage/default/20250424/1976367572fbb88a678f18c19c2f2a63.jpg',
    //   nickname: '李四',
    //   order_num: '1000',
    // },
    // {
    //   rank: 'TOP 3',
    //   avatar: '/storage/default/20250424/1976367572fbb88a678f18c19c2f2a63.jpg',
    //   nickname: '王五',
    //   order_num: '1000',
    // }
  ],
  rankList: [
    // {
    //   rank: 1,
    //   avatar: '/storage/default/20250424/1976367572fbb88a678f18c19c2f2a63.jpg',
    //   nickname: '张三',
    //   order_num: '2',
    // },
  ]
})

const getRankDetail = async () => {
  try {
    const { error, data } = await sheep.$api.store.getCyqRankDetail();
    
    if (error === 0) {
      state.dataList = state.dataList.map(item => ({
        ...item,
        num: data[item.key]?.toString() || '0'
      }));
    } else {
      uni.$toast.error(data?.message || '获取数据失败');
    }
  } catch (err) {
    console.error('获取排名详情失败:', err);
    uni.$toast.error('获取数据失败');
  }
}

const getRankList = async () => {
  try {
    const { error, data } = await sheep.$api.store.getCyqRankList({ type: state.type })
    if (error == 0) {
      state.rankList = data;
      if (state.rankList.length < 3) {
        state.rankTOPList = []
      } else {
        state.rankTOPList = data.slice(0, 3)
        state.rankTOPList = state.rankTOPList.map((item, index) => ({
          ...item,
          nickname: index == 0 ? state.rankTOPList[1].nickname : index == 1 ? state.rankTOPList[0].nickname : state.rankTOPList[2].nickname,
          avatar: index == 0 ? state.rankTOPList[1].avatar : index == 1 ? state.rankTOPList[0].avatar : state.rankTOPList[2].avatar,
          order_num: index == 0 ? state.rankTOPList[1].order_num : index == 1 ? state.rankTOPList[0].order_num : state.rankTOPList[2].order_num,
        }))

        state.rankList = state.rankList.slice(3)
        state.rankList = state.rankList.map((item, index) => ({
          ...item,
          rank: index + 4
        }))
      }
    } else {
      uni.$toast.error(data?.message || '获取数据失败');
    }
  } catch (err) {
    console.error('获取排名列表失败:', err);
    uni.$toast.error('获取数据失败');
  }

}

function onTabsChange(e) {
  console.log(e, 'onTabsChange=')
  state.currentTab = e.index;
  state.type = tabMaps[e.index].value;
  getRankList()
}

const onFooterTabClick = async (index) => {
  console.log(index, 'onFooterTabClick=')
  if (index == 1) {
    uni.navigateTo({
      url: '/pages/store/team'
    })
  } else if (index == 2) {
    try {
      const { error, data } = await sheep.$api.store.getOwnStoreInfo()
      console.log(error, 'error====shop');
      console.log(data, 'res');
     
      if (JSON.parse(uni.getStorageSync('user-store')).userInfo.id == null) {
        return
      } else {
        uni.setStorageSync('shopInfo', JSON.stringify(data))
        uni.navigateTo({
          url: '/pages/store/shop?id=' + data.id
        })
      }
    } catch(err) {
      uni.$toast.error('获取数据失败');
    }
  }
}

onLoad(() => {
  getRankDetail();
  getRankList();
});

</script>

<style lang="scss" scoped>
@import './style/rank_save.scss';
</style>
